<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        ul,ol{list-style: none;}
        #banner{width: 650px;height: 400px;position: relative;overflow: hidden;}
        #banner .point{position: absolute;z-index: 999;bottom: 10px;left: 20px;}
        #banner .point li{float: left;background: rgba(111, 222, 123, 0.2);margin: 10px;width: 30px;text-align: center;cursor: pointer;}
        #banner .image{position: absolute;}
        #banner .image li{width: 650px;height: 400px;}
        #banner .image img{width: 100%;height: 100%;}
        #banner .point .active{background: rgba(111, 222, 123, 1);}
    </style>
    <script>
        $(function(){
            var aBtns = $("#banner .point li");
            var oUl = $("#banner ul");
            var aLis = oUl.find("li");
            
            //轮播效果
            var iNow = 0; //当前显示图片下标
            aBtns.click(function(){
               iNow = $(this).index();
               tab();
            })

            $("#banner").mouseenter(function(){
                clearInterval(timer);
            }).mouseleave(function(){
                timer = setInterval(function(){
                    iNow++;
                    tab();
                },2000);
            })
            //定时器
            var timer = null;
            timer = setInterval(function(){
                iNow++;
                tab();
            },2000);

            function tab(){
                aBtns.attr("class","").eq(iNow).attr("class","active");
                if(iNow==aBtns.length){
                    aBtns.attr("class","").eq(0).attr("class","active");
                }
                oUl.animate({
                    top: iNow * -400
                },500,function(){
                    if(iNow == aBtns.length){
                        iNow = 0;
                        oUl.css("top",0);
                    }
                })
            }
        })
    </script>
</head>
<body>
    <div id="banner">
        <ol class="point">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        <ul class="image">
            <li><a href="javascript:;"><img src="../image/01.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="../image/02.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="../image/03.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="../image/04.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="../image/05.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="../image/01.jpg" alt=""></a></li>
        </ul>
    </div>
</body>
</html>